<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'
import { useAttractionApi } from '@/api/attraction'
import { useCommentApi } from '@/api/comment'
import { useFavoriteApi } from '@/api/favorite'
import { getCurrentTime } from '@/utils/common'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const { user } = storeToRefs(userStore)

const attractionApi = useAttractionApi()
const commentApi = useCommentApi()
const favoriteApi = useFavoriteApi()

const attractionId = route.params.id

const state = reactive({
  attraction: {},
  comments: [],
  newComment: ''
})

// 加载景点详情
const loadAttractionDetail = async () => {
  state.attraction = await attractionApi.getAttraction(attractionId)
}

// 加载评论
const loadComments = async () => {
  const res = await commentApi.getCommentByAttractionId(attractionId)
  state.comments = res.records
}

// 处理收藏
const handleFavorite = async () => {
  if (state.attraction.isFavorite) {
    await favoriteApi.cancel(attractionId)
    state.attraction.isFavorite = false
    ElMessage.success('已取消收藏')
  } else {
    await favoriteApi.save({ attractionId })
    state.attraction.isFavorite = true
    ElMessage.success('收藏成功')
  }
}

// 提交新评论
const submitComment = async () => {
  const content = state.newComment.trim()
  if (!content) return ElMessage.warning('请输入评论内容')

  await commentApi.save({ attractionId, content })

  state.comments.unshift({
    avatar: user.value.avatar,
    username: user.value.username,
    content: content,
    status: 'PENDING',
    createTime: getCurrentTime()
  })

  ElMessage.success('评论成功')
  state.newComment = ''
}

onMounted(async () => {
  await loadAttractionDetail()
  await loadComments()
})
</script>

<template>
  <div class="attraction-container">
    <!-- 景点卡片 -->
    <el-card shadow="hover" class="attraction-card">
      <!-- 景点图片 -->
      <el-image
        class="attraction-image"
        :src="state.attraction.imageUrl"
        :preview-src-list="[state.attraction.imageUrl]"
        fit="cover"
      />

      <!-- 景点信息 -->
      <div class="attraction-info">
        <h1 class="attraction-title">{{ state.attraction.name }}</h1>
        <div class="meta-info">
          <div class="meta-item">
            <el-icon><Location /></el-icon>
            <span>{{ state.attraction.address }}</span>
          </div>
          <div class="meta-item">
            <el-icon><Star /></el-icon>
            <span>{{ state.attraction.favoriteCount }}人收藏</span>
          </div>
          <div class="meta-item">
            <el-icon><ChatDotRound /></el-icon>
            <span>{{ state.attraction.commentCount }}条评论</span>
          </div>
        </div>

        <p class="attraction-desc">{{ state.attraction.description }}</p>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button type="primary" icon="" plain @click="router.go(-1)">
            <el-icon><ArrowLeft /></el-icon>
            返回
          </el-button>
          <el-button icon="star" :type="state.attraction.isFavorite ? 'danger' : 'success'" @click="handleFavorite">
            {{ state.attraction.isFavorite ? '已收藏' : '收藏' }}
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 评论区域 -->
    <div class="comment-section">
      <h2 class="section-title">用户评论 ({{ state.attraction.commentCount }})</h2>

      <!-- 评论表单 -->
      <el-form class="comment-form">
        <el-form-item>
          <el-input
            v-model="state.newComment"
            type="textarea"
            :rows="4"
            placeholder="分享你的游玩体验..."
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-button type="primary" @click="submitComment">发表评论</el-button>
      </el-form>

      <!-- 评论列表 -->
      <div class="comment-list">
        <div v-if="state.comments.length === 0" class="empty-comment">
          <el-empty description="暂无评论" />
        </div>
        <div v-else>
          <div v-for="comment in state.comments" :key="comment.id" class="comment-item">
            <div class="comment-header">
              <el-avatar :size="40" :src="comment.avatar" />
              <div class="user-info">
                <span class="username">{{ user.username == comment.username ? '我' : comment.username }}</span>
                <span>
                  <el-tag type="warning" v-if="comment.status === 'PENDING'" effect="plain">审核中</el-tag>
                </span>
                <span class="comment-time">{{ comment.createTime }}</span>
              </div>
            </div>
            <div class="comment-content">
              {{ comment.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.attraction-card {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
}

.attraction-image {
  width: 100%;
  height: 400px;
  border-radius: 12px 12px 0 0;
  transition: transform 0.3s;
}

.attraction-image:hover {
  transform: scale(1.02);
}

.attraction-info {
  padding: 20px;
}

.attraction-title {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}

.meta-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  color: #666;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.attraction-desc {
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.comment-section {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.comment-form {
  margin-bottom: 30px;
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 2px solid #f5f5f5;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: bold;
  font-size: 15px;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-content {
  line-height: 1.6;
  color: #333;
}

.empty-comment {
  padding: 40px 0;
}
</style>
